<template>
  <div class="container">
    <van-nav-bar
      title="登录"
      left-text="返回"
      right-text="注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    ></van-nav-bar>
    <br />
    <ValidationObserver ref="observer" v-slot="{ invalid }" tag="form">
      <van-cell-group>
        <ValidationProvider
          :rules="{
            required: true,
            length: 11,
            regex: isMobile
          }"
          v-slot="{ errors }"
          name="手机号"
        >
          <van-field
            v-model="phone"
            label="手机号"
            placeholder="请输入手机号"
            clearable
            :error-message="errors[0]"
            autofocus
          ></van-field>
        </ValidationProvider>
        <ValidationProvider
          :rules="{
            required: true,
            numeric: true,
            min: 4,
            max: 6
          }"
          v-slot="{ errors }"
          name="验证码"
        >
          <van-field
            v-model="sms"
            center
            clearable
            label="验证码"
            placeholder="请输入短信验证码"
            :error-message="errors[0]"
          >
            <van-button
              slot="button"
              size="small"
              type="primary"
              :loading="smsBtnLoading"
              loading-text="发送中..."
              :disabled="smsBtnDisabled"
              @click="onClickSms"
            >
              {{ smsBtnStr }}</van-button
            >
          </van-field>
        </ValidationProvider>
      </van-cell-group>
      <br />
      <div style="margin: 0 15px; ">
        <van-button
          type="primary"
          size="large"
          :loading="submitBtnLoading"
          loading-text="提交中..."
          @click="onClickSubmit"
          >提交</van-button
        >
      </div>
    </ValidationObserver>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      phone: "",
      sms: "",
      isMobile: new RegExp("^1[3456789]\\d{9}$"),
      smsBtnStr: "发送验证码",
      smsBtnLoading: false,
      smsBtnDisabled: false,
      submitBtnLoading: false
    };
  },
  methods: {
    //登录提交
    async onClickSubmit() {
      const isValid = await this.$refs.observer.validate();
      if (!isValid) {
        return;
      }

      this.submitBtnLoading = true;
      setTimeout(() => {
        this.$notify({ type: "danger", message: "手机号或验证码错误" });
        this.submitBtnLoading = false;
      }, 2000);
    },

    //发送验证码
    async onClickSms() {
      const isValid = this.isMobile.test(this.phone);
      if (!isValid) {
        return;
      }

      this.smsBtnLoading = true;

      setTimeout(() => {
        this.$notify({ type: "success", message: "短信发送成功" });
        this.smsBtnLoading = false;
        this.smsBtnDisabled = true;
        this.smsBtnStr = "60秒后可重发";

        let sec = 60;
        let interval = setInterval(() => {
          sec--;
          this.smsBtnStr = `${sec}秒后可重发`;
          if (sec === 0) {
            this.smsBtnDisabled = false;
            this.smsBtnStr = "发送验证码";
            clearInterval(interval);
          }
        }, 1000);
      }, 2000);
    },
    onClickLeft() {
      this.$router.back(-1);
    },
    onClickRight() {

    }
  }
};
</script>

<style scoped></style>
